<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" media="screen" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/treetable/jquery.treetable.css" />
    <link rel="stylesheet" href="../../css/treetable/jquery.treetable.theme.default.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../layui/css/layui.css">
</head>
<body>
<div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <header style="height: 100%">
            <div align="left">
                <table style="width: 100%">
                    <tr>
                        <td>
                        </td>
                        <td align="right">
                            <button class="layui-btn layui-btn-sm" onclick="location.href='addMenu.html'" permission="back:menu:save">
                                <i class="layui-icon">&#xe608;</i> 添加
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
        </header>


        <div>
            <table id="dt-table" class="table table-striped table-bordered table-hover" style="width:100%">
                <tr>
                    <th width="20%">名称</th>
                    <th width="5%">id</th>
                    <th>href</th>
                    <th width="5%">sort</th>
                    <th>操作</th>
                </tr>
            </table>
        </div>
    </div>
</div>

    <script src="../../js/constant.js"></script>
    <script type="text/javascript" src="../../js/libs/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../../js/jq.js"></script>
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script type="text/javascript" src="../../js/my/permission.js"></script>
    <script src="../../js/libs/jquery.treetable.js"></script>
    <script type="text/javascript">
        var pers = checkPermission();

        layui.use('layer', function(){
            var layer = layui.layer;
            var option = {
                expandable : true,
                clickableNodeNames : true,
                onNodeExpand : function() {
                    var d = this;
                    console.log(d['id']);
                    console.log(d['parentId']);
                },
                onNodeCollapse : function() {
                    var d = this;
                    console.log(d['id'] + "Collapse");
                    console.log(d['parentId'] + "Collapse");
                }

            };

            initMenuList();
            $("#dt-table").treetable(option);
        });

        function initMenuList(){
            $.ajax({
                type : 'get',
                url : domainName + '/api-b/menus/all',
                contentType: "application/json; charset=utf-8",
                async:false,
                success : function(data) {
                    var length = data.length;
                    for(var i=0; i<length; i++){
                        var d = data[i];
                        var tr = "<tr data-tt-id='" + d['id'] + "' data-tt-parent-id='" + d['parentId'] + "'>";
                        var td1 = "<td>" + d['name'] +"</td>";
                        tr += td1;
                        var id = "<td>" + d['id'] +"</td>";
                        tr += id;
                        var url = "";
                        if(d['url'] != null){
                            url = d['url'];
                        }
                        var td2 = "<td>" + url +"</td>";
                        tr += td2;

                        var sort = d['sort'];
                        if(sort == 0){
                            sort = "";
                        }

                        var td4 = "<td>" + sort +"</td>";
                        tr += td4;

                        var id = d['id'];
                        var href = "updateMenu.html?id=" + id;
                        var edit = buttonEdit(href, "back:menu:update", pers);
                        var del = buttonDel(id, "back:menu:delete", pers);
                        tr += "<td>"+edit + del+"</td>";
                        tr += "</tr>"
                        $("#dt-table").append(tr);
                    }
                }
            });
        }

        function del(id){
            layer.confirm('确定要删除吗？', {
                btn : [ '确定', '取消' ]
            }, function() {
                $.ajax({
                    type : 'delete',
                    url : domainName + '/api-b/menus/' + id,
                    success : function(data) {
                        location.reload();
                    }
                });
            });
        }

    </script>
</body>
</html>